<template>
  <div class="all_into_page">

    <!-- 搜索区域 开始 -->
    <div class="search_box">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="客户姓名：">
          <el-input v-model="searchForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户手机：">
          <el-input v-model="searchForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="searchForm.state">
            <el-option v-for="(item,index) in BEHINDSTATUSSELECTLIST" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期：">
          <el-date-picker v-model="searchForm.orderTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索区域 end -->

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table class="el_table" :data="dataList" border>
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="客户id" prop="customerId">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="lookDetail(row)">{{row.customerId}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="客户姓名" prop="customerName">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="lookDetail(row)">{{row.customerName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="客户手机" prop="customerPhone">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" @click="lookDetail(row)">{{row.customerPhone}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="预约联系时间" prop="appointmentTime"></el-table-column>
        <el-table-column label="预约备注信息" prop="remark"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="{row}">{{BOOKSTATUSLIST[row.state]}}</template>
        </el-table-column>
        <el-table-column label="创建日期" prop="createDate"></el-table-column>
      </el-table>
      <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
    </div>
    <!-- 列表区域 end -->

  </div>
</template>
  <script>
import { deepClone, showModal, showToast, broadcast } from "@/utils/util";
import { GET_APPOINTMENT_LIST } from "@/http/customer";
import { BOOKSTATUSLIST, BEHINDSTATUSSELECTLIST } from "@/common/constants";
export default {
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      BOOKSTATUSLIST,
      BEHINDSTATUSSELECTLIST,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList();
    },

    // 获取参数
    getParams() {
      let oParams = {};
      let o = deepClone(this.searchForm);
      let n = o.orderTime || [];
      if (n && n.length > 0) {
        o.startDate = n[0];
        o.endDate = n[1];
      }
      delete o.orderTime;

      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      GET_APPOINTMENT_LIST(oParams).then((res) => {
        let obj = res.data || {};
        this.dataList = obj.dataList || [];
      });
    },

    // 查看用户详情
    lookDetail(row) {
      let options = deepClone(row);
      let list = deepClone(this.dataList);
      list.map((k) => {
        k.id = k.customerId;
        return k;
      });
      options.id = options.customerId;
      broadcast("look.user.follow", { data: options, list: list });
    },
  },
};
</script>
  <style lang="scss" scoped>
.all_into_page {
  padding: 20px;
}
.el_link {
  text-decoration: underline;
}
</style>
    